<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1,user-scalable=0" name="viewport">
    <title>我的券包</title>
    <link href="../../public/plugin/weui/weui.min.css" rel="stylesheet">
    <link href="../../public/plugin/jquery-weui/css/jquery-weui.min.css" rel="stylesheet">
    <link href="../../public/plugin/vant/index.css" rel="stylesheet">
    <link href="../../public/css/iconfont.css?v=20210227" rel="stylesheet">
    <link href="../../public/css/common.css?v=20211224" rel="stylesheet">
    <style>
        .cell-icon {
            margin: 0;
            padding: 0;
        }

        .cell-icon img {
            height: 20px;
            margin-right: 5px;
            vertical-align: middle;
        }

        .van-cell {
            padding: 22px;
            font-size: 17px;
        }

        .van-cell:last-child::after {
            position: absolute;
            box-sizing: border-box;
            content: ' ';
            pointer-events: none;
            right: 0;
            bottom: 0;
            left: 16px;
            border-bottom: 1px solid #ebedf0;
            -webkit-transform: scaleY(.5);
            transform: scaleY(.5);
        }
    </style>
</head>
<body>
<div id="app" v-cloak>
    <div>
        <van-cell :title="item.couponTypeName" :value="item.couponCount + '张'" @click="showCouponList(item)"
                  is-link v-for="(item,index) in couponList">
            <template #title>
                <span class="cell-icon">
                    <img :src="'../../public/image/icon/coupon-' + item.couponType + '.svg'" alt="">
                </span>
                <span class="custom-title">{{ item.couponTypeName }}</span>
            </template>
        </van-cell>
    </div>
    <div @click="WXUtils.goHome()" class="home-btn">
        <img alt="" src="../../public/image/icon/home.svg">
    </div>
</div>
<script src="../../public/plugin/jquery/jquery.min.js" type="text/javascript"></script>
<script src="../../public/plugin/jquery-weui/js/jquery-weui.min.js" type="text/javascript"></script>
<script src="../../public/plugin/vue/vue.min.js" type="text/javascript"></script>
<script src="../../public/plugin/vant/vant.min.js" type="text/javascript"></script>
<script src="../../public/js/common.js?v=20230514" type="text/javascript"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            couponList: []
        },
        mounted: function () {
            let self = this;
            let memberId = getCookie(COOKIE_MEMBER_ID);
            if (!memberId) {
                MemberUtils.getMemberInfo().then(function (res) {
                    console.log("会员基础信息");
                    console.log(res);
                    setCookie(COOKIE_MEMBER_ID, res.data.id, 30);
                    if (res && res.code === 200) {
                        self.getCouponTypeNumber(res.data.id);
                    }
                })
            } else {
                console.log("cookie读取会员ID");
                self.getCouponTypeNumber(memberId);
            }
        },
        methods: {
            // 获取优惠券类型统计列表
            getCouponTypeNumber: function (memberId) {
                let self = this;
                self.couponList = [];
                MemberUtils.getCouponTypeNumber(memberId).then(function (res) {
                    console.log("券类型统计");
                    console.log(res);
                    if (res && res.code === 200) {
                        self.couponList = res.data;
                    }
                })
            },
            // 显示某种优惠券详细列表
            showCouponList: function (item) {
                console.log(item);
                let couponTypeName = encodeURIComponent(encodeURIComponent(item.couponTypeName));
                window.location.href = "./type.html?couponType=" + item.couponType + "&couponTypeName=" + couponTypeName + '&_=' + new Date().getTime();
            }
        }
    })
</script>
</body>
</html>
